<template>
    <div id="login_page">
    <div class="w640">
      <div class="vi_area">
        <dl>
          <dt><img src="./images/vi.svg" alt=""></dt>
          <dd>用户登录</dd>
        </dl>
        <ul>
          <el-form class="login_form" :model="loginForm" ref="loginForms" :rules="rules">
          <el-form-item prop="username">
            <el-input v-model="loginForm.account" size="large" :prefix-icon="UserFilled"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="loginForm.password" size="large" :prefix-icon="Lock"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="false" type="primary" class="login_btn" @click="login" >登录</el-button>
          </el-form-item>
        </el-form>
        </ul>
      </div>
      <div class="register_addon">
        <p>
          <a href="./forget.htm">忘记密码</a>
          <a href="./login_mobile.htm">短信登录</a>
        </p>
        <p><RouterLink to="/register"><button>没有账号？注册一个</button></RouterLink></p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Login">
import {reactive} from "vue"
import { UserFilled, Lock } from '@element-plus/icons-vue'
//获取路由器
import { useRouter } from "vue-router";
const $router =useRouter()
//获取用户小仓库
import useUserStore from '@/store/modules/users'
const UserStore =useUserStore()
//引入登录不同时间的函数
import {getTimeMessage} from "@/utils/times"
//引用element-plus的消息提示框
import { ElNotification } from 'element-plus'
//获取用户小仓库ts的数据
// import { loginFormData} from "@/api/users/type"
//定义用户信息的响应式数据
const loginForm =reactive({account:'xiaotuxian001',password:'123456'})
//点击登录按钮的回调
  const login =async()=>{
    //通知仓库发登录请求
    //登录成功->跳转到首页
   await UserStore.getLogin(loginForm)
    $router.push('/')
    // 登录成功的提示
    ElNotification({
      type: 'success',
      message: '登录成功',
      title: `${getTimeMessage()}`,
      duration: 3000 // 设置提示框显示时间为 3 秒
    })
  }
// 自定义校验规则函数
const validatorAccount = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback()
  } else {
    callback(new Error('用户名至少5位'))
  }
}
const validatorPassWord = (rule: any, value: any, callback: any) => {
  if (value.length >= 5 && value.length <= 10) {
    callback()
  } else {
    callback(new Error('密码至少6位并小于10位'))
  }
}

//定义表单校验的规则
const rules ={
  account:[
  { trigger: 'change', validator: validatorAccount }
  ],
  password:[
    {trigger:'change',validator:validatorPassWord}
  ]
}
  

</script>

<style scoped lang="scss">
.login_form{
  margin: 25px 20px 0 20px;
  .login_btn{
  width: 100%;
  height: 46px;
  background: #64c5ba;
  background: linear-gradient(135deg, #64c5ba, #95ec69);
  border: none;
}
}

</style>